<template>

    <div class="common-layout">
        <el-container>
            <el-aside style="width: auto;">

                <el-menu router style="height: 100vh;" active-text-color="#409eff" background-color="#304156"
                    class="el-menu-vertical-demo" text-color="white" @open="handleOpen" @close="handleClose"
                    :collapse="isCollapse" :collapse-transition="false" @select="handleSelect">
                    <el-menu-item class="system-title" v-if="!isCollapse">
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>教培管理系统</span>
                    </el-menu-item>


                    <el-sub-menu index="3" class="full-width-submenu">
                        <template #title>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>超级管理</span>
                        </template>
                        <el-menu-item-group style="background-color: #1f2d3d;">
                            <el-menu-item index="/main/user">用户管理</el-menu-item>
                            <el-menu-item index="/main/role">角色管理</el-menu-item>
                            <el-menu-item index="/main/menu">菜单管理</el-menu-item>
                            <el-menu-item index="/main/campusOrder">订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>


                    <el-sub-menu index="1" class="full-width-submenu">
                        <template #title>
                            <el-icon class="menu-icon">
                                <Location />
                            </el-icon>
                            <span>上传审核员</span>
                        </template>

                        <el-menu-item-group style="background-color: #1f2d3d;">
                            <el-menu-item index="/main/upload">视频管理</el-menu-item>
                            <el-menu-item index="1-2">评论管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>


                    <el-sub-menu index="4" class="full-width-submenu">
                        <template #title>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>审核管理员</span>
                        </template>
                        <el-menu-item-group style="background-color: #1f2d3d;">
                            <el-menu-item index="/main/checkActivity">审核活动</el-menu-item>
                            <el-menu-item index="/main/checkAdvert">申请广告</el-menu-item>
                            <el-menu-item index="/main/checkColumn">审核栏目</el-menu-item>
                            <el-menu-item index="/main/checkSeckillView">审核秒杀</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>


                    <el-sub-menu index="5" class="full-width-submenu">
                        <template #title>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>校区负责人</span>
                        </template>
                        <el-menu-item-group style="background-color: #1f2d3d;">
                            <el-menu-item index="/main/contract">合同管理</el-menu-item>
                            <el-menu-item index="4-2">申请活动</el-menu-item>
                            <el-menu-item index="/main/seckill">发布秒杀</el-menu-item>
                            <el-menu-item index="4-4">发布课程</el-menu-item>
                            <el-menu-item index="/main/courseOrder">订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>


                    <el-sub-menu index="6" class="full-width-submenu">
                        <template #title>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>教务端</span>
                        </template>
                        <el-menu-item-group style="background-color: #1f2d3d;">
                            <el-menu-item index="/main/student">学员管理</el-menu-item>
                            <!-- <el-menu-item index="/main/course">课程管理</el-menu-item> -->
                            <el-menu-item index="/main/attend">考勤管理</el-menu-item>
                            <el-menu-item index="/main/teacher">教师管理</el-menu-item>
                            <el-menu-item index="/main/class">班级管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                </el-menu>

            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <div class="header-top">
                        <div class="collapse-btn" @click="handleFold">
                            <el-icon :size="24">
                                <component :is="isCollapse ? 'Expand' : 'Fold'" />
                            </el-icon>
                        </div>
                        <div class="header-right">
                            <el-dropdown @command="handleCommand">
                                <el-avatar :size="40" src="https://q9.itc.cn/q_70/images03/20240607/100a8219bc9044e5a712e464525577c3.jpeg" />
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
import { UserFilled } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
const router = useRouter();


const isCollapse = ref(false)


function handleCommand(command) {
    if (command === 'logout') {
        exitLogin();
    }
}


function handleOpen(key, keyPath) {
    console.log(key, keyPath);
}
function handleClose(key, keyPath) {
    console.log(key, keyPath);
}
function handleFold() {
    isCollapse.value = !isCollapse.value

}
function handleSelect(index) {
    console.log('点击的菜单项 index:', index);
}
function exitLogin() {
    router.push('/login');
}



</script>

<style scoped>
.common-layout {
    width: 100vw;
    height: 100vh;
    /* background-color: palevioletred; */
}

.main-aside {
    width: 15vw;
    height: 100vh;
    background-color: #304156
}



.mb-2 {
    text-align: center;
    color: white;
}

.system-title {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.2);
}

.main-header {
    height: 10vh;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-top {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collapse-btn {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
}
</style>